<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			div {
				width: 200px;
				height: 200px;
				margin: 100px auto;
			}
			.txt {
				width: 200px;
				height: 100px;
				outline: none;   /*取消边框轮廓样式*/
				resize: none;	 /*禁止拖拽文本框*/
			}
			.btn {
				margin-left: 85px;
			}
			ul {
				margin: -150px auto;
			}
			li {
				width: 200px;
				font-size: 12px;
				padding: 5px 5px;
				margin: 10px auto;
				background-color: gold;
				list-style: none;
				display: none;
			}
			li a {
				float: right;
				text-decoration: none;
			}
		</style>
	</head>

	<body>
		<div>
			<textarea placeholder="说点什么吧..." class="txt"></textarea>
			<button class="btn">发布</button>
		</div>
		<ul></ul>
		<script>
			$(function() {
				//1.点击发布按钮，动态生成li，li里添加文本框的内容和删除按钮，添加到ul中
				$(".btn").on("click",function() {
					var li = $("<li></li>");
					li.html($(".txt").val()+"<a href='javaScript:;'>删除</a>");
					$("ul").prepend(li);
					li.slideDown();  //以滑动的方式显示隐藏的标签
					$(".txt").val("");
				});
				//2.点击删除按钮，可以删除当前的微博留言li(on可以给动态创建的元素绑定事件)
				$("ul").on("click","a",function() {
					$(this).parent().slideUp(function() {
						$(this).remove();	
					})
				});
			})
		</script>
	</body>
</html>